<template>
  <div id="tree" ref="tree"></div>
</template>
<script setup>
import {onMounted, reactive, ref} from 'vue'
import FamilyTree from '@balkangraph/familytree.js'
defineProps({
  msg: String
})
const tree = ref(null)
const nodes = reactive([
    { id: 1, pids: [2], name: "Amber McKenzie", gender: "female", img: "https://cdn.balkan.app/shared/2.jpg"  },
    { id: 2, pids: [1], name: "Ava Field", gender: "male", img: "https://cdn.balkan.app/shared/m30/5.jpg" },
    { id: 3, mid: 1, fid: 2, name: "Peter Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/2.jpg" },
    { id: 4, mid: 1, fid: 2, name: "Savin Stevens", gender: "male", img: "https://cdn.balkan.app/shared/m10/1.jpg"  },
    { id: 5, mid: 1, fid: 2, name: "Emma Stevens", gender: "female", img: "https://cdn.balkan.app/shared/w10/3.jpg" }
    ]
)


const mytree = (domEl, x) =>{
   let family = new FamilyTree (domEl, {
    nodes: x,
    nodeBinding: {
      field_0: "name",
      img_0: "img"
    }
  });
}

onMounted(()=>{
  mytree(tree.value,nodes)
})
</script>

<style scoped>
a {
  color: #42b983;
}
</style>
